<!--
 * @Author: daidai
 * @Date: 2022-01-12 14:23:32
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-09 14:47:24
 * @FilePath: \web-pc\src\pages\big-screen\view\home.vue
-->
<template>
  <!-- <div id="index" ref="appRef" class="index_home" :class="{ pageisScale: isScale }"> -->
  <ScaleScreen :width="1920" :height="1080" class="scale-wrap-home" :selfAdaption="$store.state.setting.isScale">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <!-- 头部 s -->
        <div class="d-flex jc-center title_wrap">
          <!-- <div class="zuojuxing"></div> -->
          <!-- <div class="youjuxing"></div> -->
          <!-- <div class="guang"></div> -->
          <div class="header">
            <div class="left">
              <div class="logo">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" width="30" height="30">
                  <!-- 外部圆环 -->
                  <circle cx="150" cy="150" r="140" fill="#ffffff" stroke="#165DFF" stroke-width="4" />

                  <!-- 内部装饰环 -->
                  <circle cx="150" cy="150" r="125" fill="none" stroke="#165DFF" stroke-width="1"
                    stroke-dasharray="6,4" />

                  <!-- 主交易图表线 -->
                  <path d="M70,200 C100,180 120,210 150,170 C180,130 200,160 230,120" fill="none" stroke="#165DFF"
                    stroke-width="4" stroke-linecap="round" />

                  <!-- 指标信号线 -->
                  <path d="M70,180 C100,160 130,190 160,150 C190,110 210,140 230,100" fill="none" stroke="#36CFC9"
                    stroke-width="2.5" stroke-linecap="round" stroke-dasharray="8,2" />

                  <!-- 上升箭头 -->
                  <polygon points="230,120 250,140 220,140" fill="#00B42A" />

                  <!-- 指标点 -->
                  <circle cx="100" cy="180" r="5" fill="#F53F3F" />
                  <circle cx="150" cy="170" r="5" fill="#F53F3F" />
                  <circle cx="180" cy="130" r="5" fill="#F53F3F" />
                  <circle cx="230" cy="120" r="5" fill="#F53F3F" />

                  <!-- 交易符号元素 -->
                  <rect x="135" y="80" width="30" height="5" fill="#165DFF" />
                  <rect x="147" y="60" width="6" height="25" fill="#165DFF" />

                  <!-- 指标图形元素 -->
                  <circle cx="190" cy="90" r="10" fill="none" stroke="#165DFF" stroke-width="2" />
                  <line x1="190" y1="80" x2="190" y2="100" stroke="#165DFF" stroke-width="2" />
                  <line x1="180" y1="90" x2="200" y2="90" stroke="#165DFF" stroke-width="2" />
                </svg>
              </div>
              <el-divider direction="vertical"></el-divider>
              <div>现货交易指标系统<i class="blq-icon-shezhi02" style="margin-left: 10px" @click="showSetting"></i></div>
            </div>

            <div class="right">
              <el-avatar size="medium" :src="circleUrl"></el-avatar>
              <div class="username">{{ userInfo.loginName }}</div>
              <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-submenu index="1">
                  <!-- <template slot="title">选项4</template> -->
                  <el-menu-item index="退出登录">退出登录</el-menu-item>
                </el-submenu>
              </el-menu>
            </div>

          </div>
          <div class="timers">
            <!-- {{ dateYear }} {{ dateWeek }} {{ dateDay }} -->
            <!-- <i class="blq-icon-shezhi02" style="margin-left: 10px" @click="showSetting"></i> -->
          </div>
        </div>
        <!-- 头部 e-->
        <!-- 内容  s-->
        <div class="content">
          <!-- 内容左侧  s-->
          <div class="left">
            <div class="item" @click="onChoseMenu('/home')" :class="menu === '/home' ? 'click' : ''">
              <div class="icon"><i class="el-icon-house"></i></div>
              <div>首页</div>
            </div>

            <div class="item" @click="onChoseMenu('/table')" :class="menu === '/table' ? 'click' : ''">
              <div class="icon"><i class="el-icon-house"></i></div>
              <div>现货交易报表</div>
            </div>

            <div v-if="userInfo.roleName && userInfo.roleName.includes('管理员')" class="item" @click="onChoseMenu('/user')"
              :class="menu === '/user' ? 'click' : ''">
              <div class="icon"><i class="el-icon-house"></i></div>
              <div>用户管理</div>
            </div>

            <div class="item" @click="onChoseMenu('/config')" :class="menu === '/config' ? 'click' : ''">
              <div class="icon"><i class="el-icon-house"></i></div>
              <div>公式配置</div>
            </div>
          </div>
          <!-- 内容左侧  e-->
          <div class="right">
            <router-view></router-view>
          </div>
        </div>


        <!-- 内容 e -->
      </div>
    </div>
    <Setting ref="setting" />
  </ScaleScreen>
  <!-- </div> -->
</template>

<script>
import { formatTime } from "../utils/index.js";
import Setting from "./setting.vue";
import ScaleScreen from "@/components/scale-screen/scale-screen.vue";
import router from '@/router'

export default {
  components: { Setting, ScaleScreen },
  data() {
    return {
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      activeIndex: null,
      menu: '/home',
      userInfo: {},
    };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  computed: {},
  created() {
    const userInfo = localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')) : {}
    this.userInfo = userInfo
    // console.log(this.$route.fullPath,'this.$route---');
    const fullPath = this.$route.fullPath
    if (['/home', '/table', '/user', '/config'].includes(fullPath)) {
      this.menu = fullPath
    } else {
      this.menu = '/home'
    }

  },
  mounted() {
    this.timeFn();
    this.cancelLoading();
  },
  beforeDestroy() {
    clearInterval(this.timing);
  },
  watch: {
    // '$route'(to, from) {
    //   // to: 即将进入的目标路由对象
    //   // from: 当前导航正要离开的路由对象
    //   console.log('路由变化：', from.path, '→', to.path)

    //   // 可以在这里执行路由变化时的逻辑
    // }
  },
  methods: {
    onChoseMenu(val) {
      this.menu = val
      router.push(val)
    },
    handleSelect(key) {
      console.log(key);
      if (key === '退出登录') {
        localStorage.clear('userInfo')
        router.push("/login")
      }
    },
    showSetting() {
      this.$refs.setting.init();
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), "HH: mm: ss");
        this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    cancelLoading() {
      let timer = setTimeout(() => {
        this.loading = false;
        clearTimeout(timer);
      }, 500);
    },
  },
};
</script>

<style lang="scss">
@import "./home.scss";
</style>
